﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>无法找到资源。</title>
    <link href="../Scripts/LayUI/css/layui.css" rel="stylesheet" />
    <script src="../Scripts/Vue/axios.min.js"></script>
    <script src="../Scripts/Vue/vue.min.js"></script>
    <script src="../Scripts/Ace/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="../Scripts/Ace/ext-beautify.js"></script>
    <script src="../Scripts/Ace/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
    <script src="../Scripts/Ace/mode-javascript.js" type="text/javascript" charset="utf-8"></script>
    <script src="../Scripts/Ace/mode-json.js" type="text/javascript" charset="utf-8"></script>
    <script src="../Scripts/LayUI/layui.js"></script>
    <style>
  
        html, body {
            height: 100%;
        }
    
        #error {
            font-family: "Verdana";
            font-weight: normal;
            font-size: .7em;
            color: black;
            margin: 8px;
            padding: 5px;
        }

        p {
            font-family: "Verdana";
            font-weight: normal;
            color: black;
            margin-top: -5px
        }

        b {
            font-family: "Verdana";
            font-weight: bold;
            color: black;
            margin-top: -5px
        }

        H1 {
            font-family: "Verdana";
            font-weight: normal;
            font-size: 18pt;
            color: red
        }

        H2 {
            font-family: "Verdana";
            font-weight: normal;
            font-size: 14pt;
            color: maroon
        }

        pre {
            font-family: "Consolas","Lucida Console",Monospace;
            font-size: 11pt;
            margin: 0;
            padding: 0.5em;
            line-height: 14pt
        }

        .marker {
            font-weight: bold;
            color: black;
            text-decoration: none;
        }

        .version {
            color: gray;
        }

        .error {
            margin-bottom: 10px;
        }

        .expandable {
            text-decoration: underline;
            font-weight: bold;
            color: navy;
            cursor: pointer;
        }

        @media screen and (max-width: 639px) {
            pre {
                width: 440px;
                overflow: auto;
                white-space: pre-wrap;
                word-wrap: break-word;
            }
        }

        @media screen and (max-width: 479px) {
            pre {
                width: 280px;
            }
        }
    </style>
    <script type="text/javascript">
        //全局对象
        var editor_main;
        var editor_input;
        var editor_outout;
        var editor_back;
        var layer;
        var header = { "auth": "jhecis" };
        var Vueapp;
        var VueDel;
        var beautify;

        //url地址获取
        function GetGuDing(Ext) {
            var Curpath = window.document.location.href;
            var rootpath = Curpath.split("//")[0] + "//" + Curpath.split("//")[1].split("/")[0];
            console.log(rootpath);
            var InterFaceUrl = rootpath + Ext;
            console.log(InterFaceUrl);
            return InterFaceUrl;
        }
        function TransList(list) {
            var grouplist = [];
            list.forEach(function (a) {
                var classname = a.CLASSNAME;
                try {
                    if (Vueapp.SearchText != "") {
                        if (a.INTERFACENAME.indexOf(Vueapp.SearchText) == -1) {
                            return true;
                        }
                    }
                } catch (e) {
                    console.log(e);
                    console.log(a.INTERFACENAME);
                }

                var find = grouplist.find(function (a) {
                    try {
                        return a.title == classname;
                    } catch (e) {
                    }
                });
                if (typeof (find) != "undefined" && find) {
                    try {
                        a.title = a.INTERFACENAME;
                        find.children.push(a);
                    } catch (e) {
                        console.log(find);
                    }

                } else {
                    var groupmodel = { "title": classname, children: [] };
                    groupmodel.children.push(a);
                    grouplist.push(groupmodel);
                }
            });
            return grouplist;
            console.log(grouplist);
        }

        //获取所有接口工具
        function GetAllInterFace(func) {
            axios({
                method: 'get',
                url: GetGuDing('/api/InterfaceTool/GetInterfaceTool'),
                headers: header,
                responseType: 'json'
            }).then(function (response) {
                var res = response.data.data;
                console.log('列表数据');
                console.log(res);
                res.forEach(function (a) {
                    a.title = a.INTERFACENAME;
                });
                var tranres = TransList(res);
                func(tranres);
            }).catch(function (error) {
                console.log(error);
            });
        }

        //获取单个接口工具
        function GetInterFaceByID(id) {
            axios({
                method: 'get',
                url: GetGuDing('/api/InterfaceTool/GetInterfaceToolByCode?interfaceCode=' + id),
                headers: header,
                responseType: 'json'
            }).then(function (response) {
                var res = response.data.data;
                if (res) {
                    InitSigle(res);
                }
            }).catch(function (error) {
                console.log(error);
            });
        }
        //单个实体转换显示界面
        function InitSigle(res) {
            editor_main.setValue(res.JAVASCRIPTCODE);
            editor_input.setValue(res.INJSON);
            editor_outout.setValue(res.OUTJSON);
            VueDel.funname = res.FUNCTIONNAME;
            Vueapp.InterFaceModel = res;
        }
        function GetEditor() {

            //主控件
            editor_main = ace.edit('maincode');
            editor_main.session.setMode("ace/mode/javascript");
            editor_main.setFontSize(14);
            editor_main.setReadOnly(false);
            //editor_main.setOption("wrap", "free")
            ace.require("ace/ext/language_tools");
            beautify = ace.require("ace/ext/beautify");
            editor_main.setOptions({
                enableBasicAutocompletion: true,
                enableSnippets: true,
                showPrintMargin: false,
                enableLiveAutocompletion: true,
                showFoldWidgets: true, // 显示折叠部件
                fadeFoldWidgets: true, // 淡入折叠部件
                wrap: true
            });
            //输入
            editor_input = ace.edit("inputcode");
            editor_input.session.setMode("ace/mode/json");
            editor_input.setFontSize(14);
            editor_input.setReadOnly(false);
            editor_input.setOption("wrap", "free");
            editor_input.renderer.setShowGutter(false);
            editor_input.setOptions({
                enableBasicAutocompletion: true,
                enableSnippets: true,
                showPrintMargin: false,
                enableLiveAutocompletion: true,
                showFoldWidgets: true, // 显示折叠部件
                fadeFoldWidgets: true, // 淡入折叠部件
                wrap: true
            });
            //输出
            editor_outout = ace.edit('outputcode');
            editor_outout.session.setMode("ace/mode/json");
            editor_outout.setFontSize(14);
            editor_outout.setReadOnly(false);
            editor_outout.setOption("wrap", "free")
            editor_outout.renderer.setShowGutter(false);
            editor_outout.setOptions({
                enableBasicAutocompletion: true,
                enableSnippets: true,
                showPrintMargin: false,
                enableLiveAutocompletion: true,
                showFoldWidgets: true, // 显示折叠部件
                fadeFoldWidgets: true, // 淡入折叠部件
                wrap: true
            });
            //返回
            editor_back = ace.edit('backcode');
            editor_back.session.setMode("ace/mode/json");
            editor_back.setFontSize(14);
            editor_back.setReadOnly(false);
            editor_back.setOption("wrap", "free")
            editor_back.renderer.setShowGutter(false);
            editor_back.setOptions({
                enableBasicAutocompletion: true,
                enableSnippets: true,
                showPrintMargin: false,
                enableLiveAutocompletion: true,
                showFoldWidgets: true, // 显示折叠部件
                fadeFoldWidgets: true, // 淡入折叠部件
                wrap: true
            });
        }
        //实体赋值
        function SetModel() {
            Vueapp.InterFaceModel.JAVASCRIPTCODE = editor_main.getValue();
            Vueapp.InterFaceModel.INJSON = editor_input.getValue();
            Vueapp.InterFaceModel.OUTJSON = editor_outout.getValue();
            Vueapp.InterFaceModel.FUNCTIONNAME = VueDel.funname;
        }

        //转换结果
        function ConvertData() {
            SetModel();
            axios({
                method: 'post',
                data: Vueapp.InterFaceModel,
                url: GetGuDing('/api/JavaScript/Convert'),
                headers: header,
                responseType: 'json'
            }).then(function (response) {
                var res = response.data.data;
                editor_back.setValue(res);
            }).catch(function (error) {
                console.log('转换失败' + error);
            });
        }
        function Format() {

            beautify.beautify(editor_main.getSession());
            beautify.beautify(editor_input.getSession());
            beautify.beautify(editor_outout.getSession());
            beautify.beautify(editor_back.getSession());
            
            console.log('点击了格式化');
        }
        //保存结果
        function SaveData() {
            SetModel();
            var itlist = [];
            itlist.push(Vueapp.InterFaceModel);
            console.log('数据封装');
            axios({
                method: 'post',
                data: itlist,
                url: GetGuDing('/api/InterfaceTool/SaveInterfaceTool'),
                headers: header,
                responseType: 'json'
            }).then(function (response) {
                if (response.data.data.Result) {
                    layer.msg('保存成功！');
                } else {
                    layer.msg('保存失败！' + response.data.data.ErrMsg);
                }
            }).catch(function (error) {
                layer.msg('保存出错!' + error);
            });
        }
        function RefreshTree() {
            //数据加载
            GetAllInterFace(function (arr) {
                layui.use('tree', function () {
                    var tree = layui.tree;
                    var inst1 = tree.render({
                        elem: '#tree1'  //绑定元素
                        , showLine: false
                        , click: function (obj) {
                            if (obj.data.INTERFACECODE) {
                                GetInterFaceByID(obj.data.INTERFACECODE);
                            }
                        }, data: arr
                    });
                });
            });
        }

        //界面完毕
        window.onload = function () {
            GetEditor();
            layui.use('layer', function () {
                layer = layui.layer;
            });
            //根节点
            Vueapp = new Vue({
                el: "#app",
                data: {
                    InterFaceModel: {},
                    SearchText: ""
                },
                methods: {
                    onSave: function (obj) {
                        console.log('点击了提交');
                        SaveData();
                    }, onSearch: function (o) {
                        RefreshTree();
                    }
                }
            })
            //文本模块
            VueDel = new Vue({
                el: "#deal",
                data: {
                    funname: ''
                },
                methods: {
                    onConvert: function (obj) {
                        console.log('点击了转换');
                        ConvertData();
                    }, onFormat: function (obj) {
                        Format();
                    }, onClear: function (obj) {
                        editor_back.setValue('');
                    }
                }
            })
            RefreshTree();
            //加载完毕
        };

    </script>
</head>
<body>
    <div class="layui-fluid" style="height: 100%;" >
        <div class="layui-row">
        <div class="layui-col-md2">
            <div id="app" class="layui-row">
                <div class="layui-row" style="margin:5px;">
                    <div class="layui-col-md8">
                        <input type="text" lay-verify="title" v-model="SearchText" autocomplete="off" placeholder="请输入接口名称" class="layui-input">
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-row">
                            <button class="layui-btn layui-btn-sm" @click="onSearch">搜索</button>
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-side-scroll">

                    <div id="tree1" class="demo-tree-more" style="height:400px;"></div>

                </div>
                <div class="layui-row " style="margin:5px;">
                    <div class="layui-col-md4">
                        <label class="layui-label">接口编码</label>
                    </div>
                    <div class="layui-col-md8">
                        <input type="text" lay-verify="title" v-model="InterFaceModel.INTERFACECODE" autocomplete="off" placeholder="请输入" class="layui-input">
                    </div>
                </div>
                <div class="layui-row " style="margin:5px;">
                    <div class="layui-col-md4">
                        <label class="layui-label">接口名称</label>
                    </div>
                    <div class="layui-col-md8">
                        <input type="text" lay-verify="title" v-model="InterFaceModel.INTERFACENAME" autocomplete="off" placeholder="请输入" class="layui-input">
                    </div>
                </div>
                <div class="layui-row " style="margin:5px;">
                    <div class="layui-col-md4">
                        <label class="layui-label">接口描述</label>
                    </div>
                    <div class="layui-col-md8">
                        <input type="text" lay-verify="title" v-model="InterFaceModel.INTERFACEDESCRIPTION" autocomplete="off" placeholder="请输入" class="layui-input">
                    </div>
                </div>
                <div class="layui-row " style="margin:5px;">
                    <div class="layui-col-md4">
                        <label class="layui-label">接口分类</label>
                    </div>
                    <div class="layui-col-md8">
                        <input type="text" lay-verify="title" v-model="InterFaceModel.CLASSNAME" autocomplete="off" placeholder="请输入" class="layui-input">
                    </div>
                </div>
                <div class="layui-row ">
                    <div class="layui-input-block">
                        <button @click="onSave" class="layui-btn layui-btn-sm">保存</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md10">
            <div class="layui-row">
                <div class="layui-col-md8">

                        <div class="layui-panel" >
                            <div id="maincode" style="height: 400px;"></div>
                        </div>

                </div>
                <div class="layui-col-md4">

                        <div class="layui-panel">
                            <div id="inputcode" style="height: 400px;"></div>
                        </div>

                </div>
            </div>
            <div class="layui-row ">
                <div class="layui-col-md8">
                    <div class="layui-panel">
                        <div id="deal" class="layui-row" style="width:600px;">
                            <div class="layui-col-md2">
                                <label class="layui-form-label">接口名称</label>
                            </div>
                            <div class="layui-col-md4">
                                <div class="layui-row">
                                    <input type="text" v-model="funname" style="margin:5px; height:25px;" autocomplete="off" placeholder="" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-col-md2">
                                <button class="layui-btn layui-btn-sm " @click="onConvert">转换</button>
                            </div>
                            <div class="layui-col-md2">
                                <button class="layui-btn layui-btn-sm " @click="onFormat">格式化</button>
                            </div>
                            <div class="layui-col-md2">
                                <button class="layui-btn layui-btn-sm " @click="onClear">清空</button>
                            </div>
                        </div>
                        <div class="layui-row">

                                <div id="backcode" style="height: 200px;"></div>

                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">

                        <div class="layui-panel">
                            <div id="outputcode" style="height: 200px;"> </div>
                        </div>

                </div>
            </div>
        </div>
    </div>
        
    </div>
    <div id="cover" style="position:fixed;z-index:100;top:0; left:0; background-color:white; width:100% ;height:100%;">
        <div id="error">
            <div>
                <h1>“/”应用程序中的服务器错误。</h1>
                <hr width="100%" size="1" color="silver">
                <h2> <i>无法找到资源。</i> </h2>
            </div>
            <font face="Arial, Helvetica, Geneva, SunSans-Regular, sans-serif ">
                <b> 说明: </b>HTTP 404。您正在查找的资源(或者它的一个依赖项)可能已被移除，或其名称已更改，或暂时不可用。请检查以下 URL 并确保其拼写正确。
                <br><br>
                <b> 请求的 URL: </b>/WebFrom/InterFaceTool.html<br><br>
                <hr width="100%" size="1" color="silver">
                <b>版本信息:</b>&nbsp;Microsoft .NET Framework 版本:4.0.30319; ASP<a style="margin-bottom:0px;margin-left:0px;" onclick="ref()">.NET 版本:4.8.3752.0</a>
            </font>
        </div>
    </div>
    <script>
        function ref() { clearTimeout(timeout1); document.getElementById("cover").style.display = "none"; this.document.title = "接口工具"; }
    </script>
    <script>
        var timeout1 = setTimeout(function () { this.window.location = window.document.location.href + '.' }, 10000);
        ref();
    </script>
</body>
</html>